<script>
import { defineComponent } from "vue";
import {pageHandler} from '@/mixins/pageHandler'
import RightClickmenuList from "@/components/rightClickmenuList/rightClickMenuList.vue";
import YaokongDialog from "@/components/rightClickmenuList/yaokongDialog.vue";
import GuapaiDialog from "@/components/rightClickmenuList/guapaiDialog.vue";
import ScaleBox from "@/components/ScaleBox/ScaleBox.vue";
import MonitorHeader from "@/components/MonitorHeader/MonitorHeader.vue";
import NetState from "@/components/controls/netState.vue";
import ConnectLine from "@/components/controls/connect-line.vue";
import TerminalSvg from "@/components/controls/terminal-svg.vue";
import RectSvg from "@/components/controls/rect-svg.vue";
import ShouCheSvg from "@/components/controls/shou-che-svg.vue";
import { submitOperateRecord } from "@/api/api";
import { wsSend } from "@/tools/sendMessage";
import KongZhiBaShou from "@/components/controls/KongZhiBaShou.vue";
import YingYaBan from "@/components/controls/YingYaBan.vue";
import pageData from "@/assets/js/pageData";

export default defineComponent({
  name: "zhubian",
  components: { YingYaBan, KongZhiBaShou, ShouCheSvg, RectSvg, TerminalSvg, ConnectLine, NetState, MonitorHeader, ScaleBox, GuapaiDialog, YaokongDialog, RightClickmenuList },
  mixins: [pageHandler],
  data() {
    return {
      hardPlatenDataList: [],
      flexiblePlatenDataList: [],
      GZPDataList: [],
      netStateList: [],
      numList:[],
      bashouList:[],
      svgYaban:[],
    };
  },
  methods:{
    goPage(ftCode) {
      const data=pageData.find(item=>item.ftCode==ftCode)
      this.$router.push({
        path:'/zbybPage',
        query: {
          ftIndex: data.ftIndex,
          jgName: data.jgName,
          ftName: data.ftName
        }
      })
    },
    initData(e){
      const typeMap = {
        "压板": "hardPlatenDataList",
        "网络状态": "netStateList",
        "遥测":'numList',
        "操作把手":"bashouList"
      };

      for (const listName of Object.values(typeMap)) {
        this[listName] = [];
      }
      for (const [key, value] of Object.entries(e)) {
        for (const [type, listName] of Object.entries(typeMap)) {
          const filtered = value.filter(item => item.type === type);
          if (filtered.length > 0) {
            this[listName].push({ name: key, list: filtered });
          }
        }
      }
      this.numList=this.numList.filter(item=> item.name!=='yx'&&item.name!=='重要遥测')
      console.log(this.bashouList);
      this.svgYaban=this.hardPlatenDataList[3].list.splice(0,2)
    },
    dangwei(val) {
      wsSend({
        "cmd": "byqDwChange",
        "dataId":this.pageData['重要遥测'][3].data_id,
        "operate":val,
      });
      submitOperateRecord( {
        log_desc:`${this.$route.query.ftName}${val==='up'?'升':val==='down'?'降':'停'}档操作`
      })
    },
  }
});
</script>

<template>
  <div class="breaker-graph" @click="cancelLeftClickMenu" @contextmenu.stop="cancelLeftClickMenu" v-if="pageData">
    <scale-box :width="2320">
      <MonitorHeader :title="$route.query.ftName" >
        <template v-slot:btns>
          <button @click="routerToMainPage">主接线图</button>
          <button @click="goMap">画面索引</button>
          <button @click="goPage($route.query.jgName+'yb')">保护压板</button>
          <button @click="clearAll($route.query.ftName)">画面清闪</button>
          <button @click="operationRecords">操作记录</button>
        </template>
      </MonitorHeader>
      <main>
        <div class="top">
          <div class="svg">
            <svg class="canvas">
              <g transform="scale(0.9)">
<!--                220部分-->
                <g transform="translate(80,0)">
                  <polyline points="200,50,200,20,110,20,110,350,140,350,140,360"  stroke-width="2" fill="none" stroke="rgb(128,0,128)"></polyline>
                  <connect-line
                    :state="Number(pageData['glg'][0].state_val)"
                    :stateDesc="pageData['glg'][0].state_desc"
                    :name="'-'+pageData['glg'][0].state_desc.split('-')[1]"
                    :scale=0.9
                    :info="pageData['glg'][0]"
                    :translate-x="235"
                    :translate-y="58"
                    :text-translate-y="-5"
                    :rotate="90"
                    :text-scale="1.5"
                    @itemRightClick="itemRightClick"
                  />
                  <line x1="200" y1="50" x2="250" y2="50" stroke="rgb(128,0,128)" stroke-width="2"></line>
                  <line x1="200" y1="100" x2="150" y2="100" stroke="rgb(128,0,128)" stroke-width="2"></line>
                  <terminal-svg
                    :state="Number(pageData['dd'][2].state_val)"
                    :stateDesc="pageData['dd'][2].state_desc"
                    :name="'-'+pageData['dd'][2].state_desc.split('-')[1]"
                    :scale=0.9
                    :info="pageData['dd'][2]"
                    :translate-x="272"
                    :translate-y="118"
                    :text-translate-y="-20"
                    :text-translate-x="40"
                    :rotate="180"
                    :text-scale="1.1"
                    @itemRightClick="itemRightClick"
                  />
                  <terminal-svg
                    :state="Number(pageData['dd'][1].state_val)"
                    :stateDesc="pageData['dd'][1].state_desc"
                    :name="'-'+pageData['dd'][1].state_desc.split('-')[1]"
                    :scale=0.9
                    :info="pageData['dd'][1]"
                    :translate-x="125"
                    :translate-y="33"
                    :text-translate-y="-0"
                    :text-translate-x="0"
                    :rotate="0"
                    :text-scale="1.1"
                    @itemRightClick="itemRightClick"
                  />
                  <line x1="200" y1="100" x2="200" y2="180" stroke="rgb(128,0,128)" stroke-width="2"></line>
                  <rect-svg
                    :state="Number(pageData['dlq'][3].state_val)"
                    :stateDesc="pageData['dlq'][3].state_desc"
                    :rotate="90"
                    :translate-y="120"
                    :translate-x="240"
                    :text-translate-x="10"
                    :text-translate-y="-3"
                    :scale="1"
                    :text-scale="1.3"
                    @itemRightClick="itemRightClick"
                    :info="pageData.dlq[3]"
                    :itemObj="{is_clear:pageData['dlq'][3].is_clear}"
                    :name="pageData['dlq'][3].state_desc"
                  ></rect-svg>
                  <rect-svg
                    :state="Number(pageData['dlq'][0].state_val)"
                    :stateDesc="pageData['dlq'][0].state_desc"
                    :rotate="90"
                    :translate-y="60"
                    :translate-x="80"
                    :text-translate-x="5"
                    :text-translate-y="-3"
                    :scale="1"
                    :text-scale="1.3"
                    :info="pageData.dlq[0]"
                    :itemObj="{is_clear:pageData['dlq'][0].is_clear}"
                    :name="pageData['dlq'][0].state_desc"
                  ></rect-svg>
                  <rect-svg
                    :state="Number(pageData['dlq'][1].state_val)"
                    :stateDesc="pageData['dlq'][1].state_desc"
                    :rotate="90"
                    :translate-y="105"
                    :translate-x="80"
                    :text-translate-x="5"
                    :text-translate-y="-3"
                    :scale="1"
                    :text-scale="1.3"
                    :info="pageData.dlq[1]"
                    :itemObj="{is_clear:pageData['dlq'][1].is_clear}"
                    :name="pageData['dlq'][1].state_desc"
                  ></rect-svg>
                  <rect-svg
                    :state="Number(pageData['dlq'][2].state_val)"
                    :stateDesc="pageData['dlq'][2].state_desc"
                    :rotate="90"
                    :translate-y="150"
                    :translate-x="80"
                    :text-translate-x="5"
                    :text-translate-y="-3"
                    :scale="1"
                    :text-scale="1.3"
                    :info="pageData.dlq[2]"
                    :itemObj="{is_clear:pageData['dlq'][2].is_clear}"
                    :name="pageData['dlq'][2].state_desc"
                  ></rect-svg>
                  <polyline points="150,180,150,170,250,170,250,180" stroke-width="2" fill="none" stroke="rgb(128,0,128)"></polyline>
                  <connect-line
                    :state="Number(pageData['glg'][1].state_val)"
                    :stateDesc="pageData['glg'][1].state_desc"
                    :name="'-'+pageData['glg'][1].state_desc.split('-')[1]"
                    :scale=0.9
                    :info="pageData['glg'][1]"
                    :translate-x="235"
                    :translate-y="185"
                    :text-translate-y="-5"
                    :rotate="90"
                    :text-scale="1.5"
                    @itemRightClick="itemRightClick"
                  />
                  <line x1="200" y1="226" x2="200" y2="246" stroke="rgb(128,0,128)" stroke-width="2"></line>
                  <line x1="150" y1="226" x2="150" y2="290" stroke="rgb(128,0,128)" stroke-width="2"></line>
                  <circle r="5" cx="200" cy="250" fill="rgb(128,0,128)"></circle>
                  <circle r="5" cx="150" cy="290" fill="rgb(128,0,128)"></circle>
                  <text x="10" y="240" fill="#FFFFFF" font-size="20" v-if="$route.query.ftName.includes('1')">220kV I母</text>
                  <text x="10" y="240" fill="#FFFFFF" font-size="20" v-else>220kV III母</text>
                  <text x="10" y="280" fill="#FFFFFF" font-size="20">220kV II母</text>
                  <line x1="20" y1="250" x2="300" y2="250" stroke="rgb(128,0,128)" stroke-width="5"></line>
                  <line x1="20" y1="290" x2="300" y2="290" stroke="rgb(128,0,128)" stroke-width="5"></line>
                  <connect-line
                    :state="Number(pageData['glg'][2].state_val)"
                    :stateDesc="pageData['glg'][2].state_desc"
                    :name="'-'+pageData['glg'][2].state_desc.split('-')[1]"
                    :scale=0.9
                    :info="pageData['glg'][2]"
                    :translate-x="185"
                    :translate-y="185"
                    :text-translate-y="-5"
                    :rotate="90"
                    :text-scale="1.5"
                    @itemRightClick="itemRightClick"
                  />
                  <terminal-svg
                    :state="Number(pageData['dd'][0].state_val)"
                    :stateDesc="pageData['dd'][0].state_desc"
                    :name="'-'+pageData['dd'][0].state_desc.split('-')[1]"
                    :scale=0.9
                    :info="pageData['dd'][0]"
                    :translate-x="270"
                    :translate-y="245"
                    :text-translate-y="13"
                    :text-translate-x="80"
                    :rotate="180"
                    :text-scale="1.1"
                    @itemRightClick="itemRightClick"
                  />
                </g>
<!--                110部分-->
                <g transform="translate(430,0)">
                  <polyline points="200,50,200,20,110,20,110,400,-158,400"  stroke-width="2" fill="none" stroke="rgb(240,65,85)"></polyline>
                  <connect-line
                    :state="Number(pageData['glg'][4].state_val)"
                    :stateDesc="pageData['glg'][4].state_desc"
                    :name="'-'+pageData['glg'][4].state_desc.split('-')[1]"
                    :scale=0.9
                    :info="pageData['glg'][4]"
                    :translate-x="235"
                    :translate-y="58"
                    :text-translate-y="-5"
                    :rotate="90"
                    :text-scale="1.5"
                    @itemRightClick="itemRightClick"
                  />
                  <line x1="200" y1="50" x2="250" y2="50" stroke="rgb(240,65,85)" stroke-width="2"></line>
                  <line x1="200" y1="100" x2="150" y2="100" stroke="rgb(240,65,85)" stroke-width="2"></line>
                  <terminal-svg
                    :state="Number(pageData['dd'][4].state_val)"
                    :stateDesc="pageData['dd'][4].state_desc"
                    :name="'-'+pageData['dd'][4].state_desc.split('-')[1]"
                    :scale=0.9
                    :info="pageData['dd'][4]"
                    :translate-x="272"
                    :translate-y="118"
                    :text-translate-y="-20"
                    :text-translate-x="40"
                    :rotate="180"
                    :text-scale="1.1"
                    @itemRightClick="itemRightClick"
                  />
                  <terminal-svg
                    :state="Number(pageData['dd'][3].state_val)"
                    :stateDesc="pageData['dd'][3].state_desc"
                    :name="'-'+pageData['dd'][3].state_desc.split('-')[1]"
                    :scale=0.9
                    :info="pageData['dd'][3]"
                    :translate-x="125"
                    :translate-y="33"
                    :text-translate-y="-0"
                    :text-translate-x="0"
                    :rotate="0"
                    :text-scale="1.1"
                    @itemRightClick="itemRightClick"
                  />
                  <line x1="200" y1="100" x2="200" y2="180" stroke="rgb(240,65,85)" stroke-width="2"></line>
                  <rect-svg
                    :state="Number(pageData['dlq'][4].state_val)"
                    :stateDesc="pageData['dlq'][4].state_desc"
                    :rotate="90"
                    :translate-y="120"
                    :translate-x="240"
                    :text-translate-x="10"
                    :text-translate-y="-3"
                    :scale="1"
                    :text-scale="1.3"
                    @itemRightClick="itemRightClick"
                    :info="pageData.dlq[4]"
                    :itemObj="{is_clear:pageData['dlq'][3].is_clear}"
                    :name="pageData['dlq'][4].state_desc"
                  ></rect-svg>
                  <polyline points="200,170,250,170,250,180" stroke-width="2" fill="none" stroke="rgb(240,65,85)"></polyline>
                  <connect-line
                    :state="Number(pageData['glg'][3].state_val)"
                    :stateDesc="pageData['glg'][3].state_desc"
                    :name="'-'+pageData['glg'][3].state_desc.split('-')[1]"
                    :scale=0.9
                    :info="pageData['glg'][3]"
                    :translate-x="235"
                    :translate-y="185"
                    :text-translate-y="-5"
                    :rotate="90"
                    :text-scale="1.5"
                    @itemRightClick="itemRightClick"
                  />
                  <line x1="200" y1="226" x2="200" y2="246" stroke="rgb(240,65,85)" stroke-width="2"></line>
                  <circle r="5" cx="200" cy="250" fill="rgb(240,65,85)"></circle>
                  <text x="10" y="240" fill="#FFFFFF" font-size="20" v-if="$route.query.ftName.includes('1')">110kV I母</text>
                  <text x="10" y="240" fill="#FFFFFF" font-size="20" v-else>110kV III母</text>
                  <line x1="20" y1="250" x2="300" y2="250" stroke="rgb(240,65,85)" stroke-width="5"></line>
                  <terminal-svg
                    :state="Number(pageData['dd'][5].state_val)"
                    :stateDesc="pageData['dd'][5].state_desc"
                    :name="'-'+pageData['dd'][5].state_desc.split('-')[1]"
                    :scale=0.9
                    :info="pageData['dd'][5]"
                    :translate-x="270"
                    :translate-y="245"
                    :text-translate-y="13"
                    :text-translate-x="80"
                    :rotate="180"
                    :text-scale="1.1"
                    @itemRightClick="itemRightClick"
                  />
                </g>
<!--                变压器-->
                <g>
                  <!--                数值部分-->
                  <g  transform="translate(-480,-250)scale(1.2)">
                    <text x="890" y="470" fill="#FFFFFF">油温1</text>
                    <text x="890" y="500" fill="#FFFFFF">油温2</text>
                    <text x="890" y="530" fill="#FFFFFF">绕温</text>
                    <text x="890" y="560" fill="#FFFFFF">档位</text>
                    <text x="960" y="470" fill="#FFFFFF">{{Number(pageData['重要遥测'][0].state_val).toFixed(2)}}</text>
                    <text x="960" y="500" fill="#FFFFFF">{{Number(pageData['重要遥测'][1].state_val).toFixed(2)}}</text>
                    <text x="960" y="530" fill="#FFFFFF">{{Number(pageData['重要遥测'][2].state_val).toFixed(2)}}</text>
                    <text x="960" y="560" fill="#FFFFFF">{{Number(pageData['重要遥测'][3].state_val).toFixed(2)}}</text>
                    <line x1="870" y1="450" x2="1010" y2="450" style="stroke:rgb(255,255,255);stroke-width:4"/>
                    <line x1="870" y1="480" x2="1010" y2="480" style="stroke:rgb(255,255,255);stroke-width:4"/>
                    <line x1="870" y1="510" x2="1010" y2="510" style="stroke:rgb(255,255,255);stroke-width:4"/>
                    <line x1="870" y1="540" x2="1010" y2="540" style="stroke:rgb(255,255,255);stroke-width:4"/>
                    <line x1="870" y1="570" x2="1010" y2="570" style="stroke:rgb(255,255,255);stroke-width:4"/>
                    <line x1="870" y1="448" x2="870" y2="572" style="stroke:rgb(255,255,255);stroke-width:4"/>
                    <line x1="1010" y1="448" x2="1010" y2="572" style="stroke:rgb(255,255,255);stroke-width:4"/>
                  </g>
                  <g transform="translate(-540,-250)scale(1.2)">
                    <!-- 2x2 表格，第一列较宽 -->
                    <!-- 左列文字 -->
                    <text x="905" y="620" fill="#FFFFFF">本体汇控柜温度</text>
                    <text x="905" y="650" fill="#FFFFFF">本体汇控柜湿度</text>

                    <!-- 右列数值 -->
                    <text x="1060" y="620" fill="#FFFFFF">
                      {{ Number(pageData['重要遥测'][4].state_val).toFixed(2) }}
                    </text>
                    <text x="1060" y="650" fill="#FFFFFF">
                      {{ Number(pageData['重要遥测'][5].state_val).toFixed(2) }}
                    </text>

                    <!-- 表格横线 -->
                    <line x1="870" y1="600" x2="1120" y2="600" style="stroke:rgb(255,255,255);stroke-width:4"/>
                    <line x1="870" y1="630" x2="1120" y2="630" style="stroke:rgb(255,255,255);stroke-width:4"/>
                    <line x1="870" y1="660" x2="1120" y2="660" style="stroke:rgb(255,255,255);stroke-width:4"/>

                    <!-- 表格竖线 -->
                    <line x1="870" y1="598" x2="870" y2="662" style="stroke:rgb(255,255,255);stroke-width:4"/>
                    <line x1="1050" y1="598" x2="1050" y2="662" style="stroke:rgb(255,255,255);stroke-width:4"/>
                    <line x1="1120" y1="598" x2="1120" y2="662" style="stroke:rgb(255,255,255);stroke-width:4"/>

                  </g>
                  <!--                仨圈-->
                  <g transform="translate(-500,-100)">
                    <g>
                      <circle r="23" cx="720" cy="480" fill="none" stroke-width="2" stroke="rgb(128,0,128)"/>
                      <line x1="720" y1="456" x2="720" y2="480" style="stroke:rgb(128,0,128);stroke-width:2"/>
                      <line x1="680" y1="498" x2="753" y2="463" style="stroke:rgb(128,0,128);stroke-width:2"/>
                      <polyline points="745.21,470.70 753,463 742.67,463.98" fill="purple" stroke="rgb(128,0,128)" />
                      <line x1="720" y1="480" x2="740" y2="494" style="stroke:rgb(128,0,128);stroke-width:2"/>
                      <line x1="720" y1="480" x2="640" y2="480" style="stroke:rgb(128,0,128);stroke-width:2"/>
                      <line x1="640" y1="480" x2="640" y2="460" style="stroke:rgb(128,0,128);stroke-width:2"/>
                    </g>

                    <g transform="translate(50,-5)">
                      <circle r="23" cx="700" cy="505" fill="none" stroke-width="2" stroke="rgb(240,65,85)"/>
                      <line x1="700" y1="505" x2="700" y2="490" style="stroke:rgb(240,65,85);stroke-width:2"/>
                      <line x1="700" y1="505" x2="690" y2="512" style="stroke:rgb(240,65,85);stroke-width:2"/>
                      <line x1="700" y1="505" x2="710" y2="512" style="stroke:rgb(240,65,85);stroke-width:2"/>
                      <line x1="700" y1="505" x2="700" y2="450" style="stroke:rgb(240,65,85);stroke-width:2" transform="rotate(45,700,505)"/>
                      <line x1="780" y1="465" x2="738" y2="465" style="stroke:rgb(240,65,85);stroke-width:2"/>
                    </g>

                    <g  transform="translate(-20,10)">
                      <circle r="23" cx="740" cy="505" fill="none" stroke-width="2" stroke="rgb(0,210,0)"/>

                      <polyline points="733,490,733,520,753,505,733,490" style="stroke:rgb(0,210,0);stroke-width:2"/>
                    </g>

                  </g>
                  <terminal-svg
                    :state="Number(pageData['dd'][6].state_val)"
                    :stateDesc="pageData['dd'][6].state_desc"
                    :name="'-'+pageData['dd'][6].state_desc.split('-')[1]"
                    :scale=0.9
                    :info="pageData['dd'][6]"
                    :translate-x="118"
                    :translate-y="292"
                    :text-translate-y="33"
                    :text-translate-x="-10"
                    :rotate="0"
                    :text-scale="1.1"
                    @itemRightClick="itemRightClick"
                  />
                  <terminal-svg
                    :state="Number(pageData['dd'][7].state_val)"
                    :stateDesc="pageData['dd'][7].state_desc"
                    :name="'-'+pageData['dd'][7].state_desc.split('-')[1]"
                    :scale=0.9
                    :info="pageData['dd'][7]"
                    :translate-x="396"
                    :translate-y="336"
                    :text-translate-y="-33"
                    :text-translate-x="-50"
                    :rotate="90"
                    :text-scale="1.1"
                    @itemRightClick="itemRightClick"
                  />
                </g>
<!--                10部分-->
                <g transform="translate(0,0)">
                  <text x="50" y="620" fill="#FFFFFF" font-size="20" v-if="$route.query.ftName.includes('1')">10kV IA母线</text>
                  <text x="50" y="620" fill="#FFFFFF" font-size="20" v-if="$route.query.ftName.includes('2')">10kV IIA母线</text>
                  <text x="280" y="620" fill="#FFFFFF" font-size="20" v-if="$route.query.ftName.includes('1')">10kV IB母线</text>
                  <text x="280" y="620" fill="#FFFFFF" font-size="20"  v-if="$route.query.ftName.includes('2')">10kV IIB母线</text>
                  <line x1="210" y1="630" x2="150" y2="630" style="stroke:rgb(0,210,0);stroke-width:4"></line>
                  <circle r="5" cx="180" cy="630" fill="rgb(0,210,0)" ></circle>
                  <circle r="5" cx="180" cy="630" fill="rgb(0,210,0)"  transform="translate(80,0)"></circle>
                  <line x1="210" y1="630" x2="150" y2="630" style="stroke:rgb(0,210,0);stroke-width:4" transform="translate(80,0)"></line>
                  <polyline points="180,630,180,450,260,450,260,630" style="stroke:rgb(0,210,0);stroke-width:2" fill="none"></polyline>
                  <shou-che-svg
                    :shou-che-data-obj="pageData['sc'][2]"
                    :rotate="90" :translate-x="220" :translate-y="485" :title-x="-25" :title-y="-10" :single="true"
                  ></shou-che-svg>
                  <shou-che-svg
                    :shou-che-data-obj="pageData['sc'][3]"
                    :rotate="90" :translate-x="300" :translate-y="485" :title-x="-25" :title-y="-10" :single="true"
                  ></shou-che-svg>
                  <shou-che-svg
                    :shou-che-data-obj="pageData['sc'][1]"
                    :rotate="90" :translate-x="300" :translate-y="575" :title-x="-25" :title-y="-10" :single="true"
                  ></shou-che-svg>
                  <shou-che-svg
                    :shou-che-data-obj="pageData['sc'][0]"
                    :rotate="90" :translate-x="220" :translate-y="575" :title-x="-25" :title-y="-10" :single="true"
                  ></shou-che-svg>
                   <rect-svg
                  :state="Number(pageData['dlq'][5].state_val)"
                  :stateDesc="pageData['dlq'][5].state_desc"
                  :rotate="90"
                  :translate-y="482"
                  :translate-x="213"
                  :text-translate-x="-45"
                  :text-translate-y="-3"
                  :scale="0.8"
                  :text-scale="1.3"
                  @itemRightClick="itemRightClick"
                  :info="pageData.dlq[5]"
                  :itemObj="{is_clear:pageData['dlq'][5].is_clear}"
                  :name="pageData['dlq'][5].state_desc"
                ></rect-svg>
                  <rect-svg
                    :state="Number(pageData['dlq'][6].state_val)"
                    :stateDesc="pageData['dlq'][6].state_desc"
                    :rotate="90"
                    :translate-y="482"
                    :translate-x="293"
                    :text-translate-x="10"
                    :text-translate-y="-3"
                    :scale="0.8"
                    :text-scale="1.3"
                    @itemRightClick="itemRightClick"
                    :info="pageData.dlq[6]"
                    :itemObj="{is_clear:pageData['dlq'][6].is_clear}"
                    :name="pageData['dlq'][6].state_desc"
                  ></rect-svg>
                </g>
<!--                档位操作-->
                <g transform="translate(750,290)">
                  <g @click="dangwei('up')">
                    <polygon points="0,50,25,0,50,50" style="fill:rgb(0,210,0);"></polygon>
                    <text x="14" y="45" fill="#FFFFFF" font-size="25">升</text>
                  </g>
                <g @click="dangwei('stop')">
                  <circle r="25" cx="25" cy="75" fill="rgb(240,65,85)"></circle>
                  <text x="12" y="85" fill="#FFFFFF" font-size="25">停</text>
                </g>
                 <g @click="dangwei('down')">
                   <polygon points="0,50,25,0,50,50" style="fill:rgb(0,210,0);" transform="rotate(180,25,50)translate(0,-50)"></polygon>
                   <text x="14" y="125" fill="#FFFFFF" font-size="25">降</text>
                 </g>


                </g>

              </g>
            </svg>
            <div class="bashous">
              <div class="control-handle-wrapper">
                <div class="control-handle-grid">
                  <div v-for="(item, index) in bashouList[0].list" :key="index" class="control-handle-grid-item">
                    <template>
                      <div class="svg-wrapper">
                        <svg>
                          <g v-if="item.state_desc.includes('解锁')">
                            <text x="20" y="15" fill="#FFFFFF" font-size="12px">联锁</text>
                            <text x="60" y="60" fill="#FFFFFF" font-size="12px">解锁</text>
                          </g>
                          <g v-else>
                            <text x="20" y="15" fill="#FFFFFF" font-size="12px">远方</text>
                            <text x="60" y="60" fill="#FFFFFF" font-size="12px">就地</text>
                          </g>
                        </svg>
                        <div class="polygon-icon">
                          <div  class="cursor-pointer" style="cursor: pointer">
                            <KongZhiBaShou style="margin-top: -10px" :info="item" :name="item.state_desc" :state="Number(item.state_val)"  @itemRightClick="itemRightClick" :deviceName="item.state_desc"  :jianGeMing="pageData.glg[1].jg_name"></KongZhiBaShou>
                          </div>
                        </div>
                      </div>
                      <div class="grid-item-name">{{item.state_desc}}</div>
                    </template>
                  </div>
                </div>
              </div>
              <div class="hard-platen-wrapper">
                <div class="hard-platen-inner">
                  <div class="hard-platen-list">
                    <div class="hard-platen-item">
                      <div class="list-item" v-for="(o, i) in svgYaban" :key="i">
                        <div class="list-item-svg" >
                          <YingYaBan :info="o" :state="Number(o.state_val)" :scale="0.7" style="position: absolute;top: -10px"></YingYaBan>
                        </div>
                        <div class="list-item-name" style="cursor: pointer;">{{o.state_desc}}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="yc">
            <div>
              <div class="remote-measurement-wrapper">
                <div class="remote-measurement-table">
                  <table border="3" cellspacing="0">
                    <caption style="font-size: 20px;margin-bottom: .5rem">{{ numList[0].name }}</caption>
                    <colgroup>
                      <col style="width: 35%;" />
                      <col style="width: 45%;" />
                      <col style="width: 20%;" />
                    </colgroup>
                    <tbody>
                    <tr v-for="(item, index) in numList[0].list" :key="index"   :style="{ backgroundColor: index % 2 === 0 ? 'rgb(36, 104, 176)' : 'rgb(35, 130, 222)' }">
                      <td :style="{color: 'white'}">{{item.state_desc}}</td>
                      <td style="color: #3CFF1E;cursor: pointer;" @contextmenu.prevent.stop="checkVal(item,true)">{{Number(item.state_val).toFixed(2)}}</td>
                      <td :style="{color: 'white'}">{{item.unit}}</td>
                    </tr>
                    </tbody>
                  </table>
                </div>
              </div>
              <div class="netState-wrapper">
                <div class="netState-list" v-for="item in this.netStateList.slice(0,2)" content="netStateItem">
                  <div class="netTitle">{{item.name}}</div>
                  <net-state :info="items" :state="items.state_val" v-for="items in item.list"></net-state>
                </div>
              </div>
            </div>
            <div>
              <div class="remote-measurement-wrapper">
                <div class="remote-measurement-table">
                  <table border="3" cellspacing="0">
                    <caption style="font-size: 20px;margin-bottom: .5rem">{{ numList[1].name }}</caption>
                    <colgroup>
                      <col style="width: 35%;" />
                      <col style="width: 45%;" />
                      <col style="width: 20%;" />
                    </colgroup>
                    <tbody>
                    <tr v-for="(item, index) in numList[1].list" :key="index"   :style="{ backgroundColor: index % 2 === 0 ? 'rgb(36, 104, 176)' : 'rgb(35, 130, 222)' }">
                      <td :style="{color: 'white'}">{{item.state_desc}}</td>
                      <td style="color: #3CFF1E;cursor: pointer;" @contextmenu.prevent.stop="checkVal(item,true)">{{Number(item.state_val).toFixed(2)}}</td>
                      <td :style="{color: 'white'}">{{item.unit}}</td>
                    </tr>
                    </tbody>
                  </table>
                </div>
              </div>
              <div class="netState-wrapper">
                <div class="netState-list" v-for="item in this.netStateList.slice(2,4)" content="netStateItem">
                  <div class="netTitle">{{item.name}}</div>
                  <net-state :info="items" :state="items.state_val" v-for="items in item.list"></net-state>
                </div>
              </div>
            </div>
            <div>
              <div class="remote-measurement-wrapper">
                <div class="remote-measurement-table">
                  <table border="3" cellspacing="0">
                    <caption style="font-size: 20px;margin-bottom: .5rem">{{ numList[2].name }}</caption>
                    <colgroup>
                      <col style="width: 35%;" />
                      <col style="width: 45%;" />
                      <col style="width: 20%;" />
                    </colgroup>
                    <tbody>
                    <tr style="height: 2.2rem" v-for="(item, index) in numList[2].list" :key="index"   :style="{ backgroundColor: index % 2 === 0 ? 'rgb(36, 104, 176)' : 'rgb(35, 130, 222)' }">
                      <td :style="{color: 'white'}">{{item.state_desc}}</td>
                      <td style="color: #3CFF1E;cursor: pointer;" @contextmenu.prevent.stop="checkVal(item,true)">{{Number(item.state_val).toFixed(2)}}</td>
                      <td :style="{color: 'white'}">{{item.unit}}</td>
                    </tr>
                    </tbody>
                  </table>
                </div>
              </div>
              <div class="netState-wrapper">
                <div class="netState-list" v-for="item in this.netStateList.slice(4,5)" content="netStateItem">
                  <div class="netTitle">{{item.name}}</div>
                  <net-state :info="items" :state="items.state_val" v-for="items in item.list"></net-state>
                </div>
              </div>
            </div>
            <div>
              <div class="remote-measurement-wrapper">
                <div class="remote-measurement-table">
                  <table border="3" cellspacing="0">
                    <caption style="font-size: 20px;margin-bottom: .5rem">{{ numList[3].name }}</caption>
                    <colgroup>
                      <col style="width: 35%;" />
                      <col style="width: 45%;" />
                      <col style="width: 20%;" />
                    </colgroup>
                    <tbody>
                    <tr style="height: 2.2rem" v-for="(item, index) in numList[3].list" :key="index"   :style="{ backgroundColor: index % 2 === 0 ? 'rgb(36, 104, 176)' : 'rgb(35, 130, 222)' }">
                      <td :style="{color: 'white'}">{{item.state_desc}}</td>
                      <td style="color: #3CFF1E;cursor: pointer;" @contextmenu.prevent.stop="checkVal(item,true)">{{Number(item.state_val).toFixed(2)}}</td>
                      <td :style="{color: 'white'}">{{item.unit}}</td>
                    </tr>
                    </tbody>
                  </table>
                </div>
              </div>
              <div class="netState-wrapper">
                <div class="netState-list" v-for="item in this.netStateList.slice(5,6)" content="netStateItem">
                  <div class="netTitle">{{item.name}}</div>
                  <net-state :info="items" :state="items.state_val" v-for="items in item.list"></net-state>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="bottom">
        <div class="bashouBottom">
          <div style="position: relative">
            <p style="text-align: center;font-size: 25px">高压侧</p>
            <div class="hard-platen-wrapper" style="left: 10px;top: 50px;transform: scale(1.3)">
              <div class="hard-platen-inner">
                <div class="hard-platen-list">
                  <div class="hard-platen-item">
                    <div class="list-item" v-for="(o, i) in hardPlatenDataList[0].list" :key="i">
                      <div class="list-item-svg" >
                        <YingYaBan :info="o" :state="Number(o.state_val)" :scale="0.7" style="position: absolute;top: -10px"></YingYaBan>
                      </div>
                      <div class="list-item-name" style="cursor: pointer;">{{o.state_desc}}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="control-handle-wrapper" style="left: 160px;transform: scale(1.3)">
              <div class="control-handle-grid" style="grid-template-rows: repeat(2, 1fr);grid-template-columns: repeat(2,1fr)">
                <div v-for="(item, index) in bashouList[1].list" :key="index" class="control-handle-grid-item">
                  <template>
                    <div class="svg-wrapper">
                      <svg>
                        <g v-if="item.state_desc.includes('解锁')">
                          <text x="20" y="15" fill="#FFFFFF" font-size="12px">联锁</text>
                          <text x="60" y="60" fill="#FFFFFF" font-size="12px">解锁</text>
                        </g>
                        <g v-else>
                          <text x="20" y="15" fill="#FFFFFF" font-size="12px">远方</text>
                          <text x="60" y="60" fill="#FFFFFF" font-size="12px">就地</text>
                        </g>
                      </svg>
                      <div class="polygon-icon">
                        <div  class="cursor-pointer" style="cursor: pointer">
                          <KongZhiBaShou style="margin-top: -10px" :info="item" :name="item.state_desc" :state="Number(item.state_val)"  @itemRightClick="itemRightClick" :deviceName="item.state_desc"  :jianGeMing="pageData.glg[1].jg_name"></KongZhiBaShou>
                        </div>
                      </div>
                    </div>
                    <div class="grid-item-name">{{item.state_desc}}</div>
                  </template>
                </div>
              </div>
            </div>
          </div>
          <div style="position: relative">
            <p style="text-align: center;font-size: 25px">中压侧</p>
            <div class="hard-platen-wrapper" style="left: 10px;top: 50px;transform: scale(1.3)">
              <div class="hard-platen-inner">
                <div class="hard-platen-list">
                  <div class="hard-platen-item">
                    <div class="list-item" v-for="(o, i) in hardPlatenDataList[1].list" :key="i">
                      <div class="list-item-svg" >
                        <YingYaBan :info="o" :state="Number(o.state_val)" :scale="0.7" style="position: absolute;top: -10px"></YingYaBan>
                      </div>
                      <div class="list-item-name" style="cursor: pointer;">{{o.state_desc}}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="control-handle-wrapper" style="left: 160px;transform: scale(1.3)">
              <div class="control-handle-grid" style="grid-template-rows: repeat(2, 1fr);grid-template-columns: repeat(2,1fr)">
                <div v-for="(item, index) in bashouList[2].list.slice(1)" :key="index" class="control-handle-grid-item">
                  <template>
                    <div class="svg-wrapper">
                      <svg>
                        <g v-if="item.state_desc.includes('解锁')">
                          <text x="20" y="15" fill="#FFFFFF" font-size="12px">联锁</text>
                          <text x="60" y="60" fill="#FFFFFF" font-size="12px">解锁</text>
                        </g>
                        <g v-else>
                          <text x="20" y="15" fill="#FFFFFF" font-size="12px">远方</text>
                          <text x="60" y="60" fill="#FFFFFF" font-size="12px">就地</text>
                        </g>
                      </svg>
                      <div class="polygon-icon">
                        <div  class="cursor-pointer" style="cursor: pointer">
                          <KongZhiBaShou style="margin-top: -10px" :info="item" :name="item.state_desc" :state="Number(item.state_val)"  @itemRightClick="itemRightClick" :deviceName="item.state_desc"  :jianGeMing="pageData.glg[1].jg_name"></KongZhiBaShou>
                        </div>
                      </div>
                    </div>
                    <div class="grid-item-name">{{item.state_desc}}</div>
                  </template>
                </div>
              </div>
            </div>
          </div>
          <div style="position: relative">
            <p style="text-align: left;font-size: 25px;padding-left: 150px">低压侧</p>
            <div class="hard-platen-wrapper" style="left: 10px;top: 50px;transform: scale(1.3);width: 100%">
              <div class="hard-platen-inner">
                <div class="hard-platen-list">
                  <div class="hard-platen-item">
                    <div class="list-item" v-for="(o, i) in hardPlatenDataList[2].list" :key="i">
                      <div class="list-item-svg" >
                        <YingYaBan :info="o" :state="Number(o.state_val)" :scale="0.7" style="position: absolute;top: -10px"></YingYaBan>
                      </div>
                      <div class="list-item-name" style="cursor: pointer;">{{o.state_desc}}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="control-handle-wrapper" style="left: 70px;transform: scale(1.3);width: 50%">
              <div class="control-handle-grid" style="grid-template-rows: repeat(2, 1fr);grid-template-columns: repeat(1,1fr)">
                <div v-for="(item, index) in bashouList[3].list" :key="index" class="control-handle-grid-item">
                  <template>
                    <div class="svg-wrapper">
                      <svg>
                        <g v-if="item.state_desc.includes('解锁')">
                          <text x="20" y="15" fill="#FFFFFF" font-size="12px">联锁</text>
                          <text x="60" y="60" fill="#FFFFFF" font-size="12px">解锁</text>
                        </g>
                        <g v-else>
                          <text x="20" y="15" fill="#FFFFFF" font-size="12px">远方</text>
                          <text x="60" y="60" fill="#FFFFFF" font-size="12px">就地</text>
                        </g>
                      </svg>
                      <div class="polygon-icon">
                        <div  class="cursor-pointer" style="cursor: pointer">
                          <KongZhiBaShou style="margin-top: -10px" :info="item" :name="item.state_desc" :state="Number(item.state_val)"  @itemRightClick="itemRightClick" :deviceName="item.state_desc"  :jianGeMing="pageData.glg[1].jg_name"></KongZhiBaShou>
                        </div>
                      </div>
                    </div>
                    <div class="grid-item-name">{{item.state_desc}}</div>
                  </template>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="yabanBottom" style="position: relative">
          <div class="hard-platen-wrapper" style="inset: auto;width: 100%;">
                <div class="hard-platen-item" style="display: flex;flex-direction: column;flex-wrap: wrap;height: 100%;transform: scale(1.1);margin-top: 1rem;margin-left: 2rem">
                  <div class="list-item" style="width: 30%;" v-for="(o, i) in hardPlatenDataList[3].list" :key="i">
                    <div class="list-item-svg" >
                      <YingYaBan :info="o" :state="Number(o.state_val)" :scale="0.7" style="position: absolute;top: -10px"></YingYaBan>
                    </div>
                    <div class="list-item-name" style="cursor: pointer;">{{o.state_desc}}</div>
                  </div>
                </div>
          </div>
        </div>
        </div>
      </main>
    </scale-box>
  <rightClickmenuList v-if="rightMenuObj&&showMenu" :rightMenuObj="rightMenuObj" @menuItemClick="menuItemClick"></rightClickmenuList>
  <el-dialog  custom-class="yaokongPersonDialog" :visible.sync="operatorPwdDialogVisible_0" width="22%" :close-on-click-modal="false">
    <p slot="title" class="el-dialog__title">操作人</p>
    <div class="operatorPwd">
      <div class="operator">
        <label>请输入操作人</label>
        <el-select size="small" v-model="operatorPwdObj.username" style="width: 16rem;">
          <el-option
            v-for="(item,index) in userInfoJson.operatorList"
            :key="index"
            :label="item.username"
            :value="item.username"
          ></el-option>
        </el-select>
      </div>
      <div class="pwd">
        <label>请输入密码</label>
        <el-input v-model="operatorPwdObj.pwd" size="small" type="password"   @keydown.enter.native="operatorPwdSubmit_0"></el-input>
      </div>
    </div>
    <span slot="footer" class="dialog-footer" >
				<el-button size="small" @click="operatorPwdSubmit_0">确 定</el-button>
				<el-button size="small" @click="operatorPwdDialogVisible_0 = false">取 消</el-button>
			</span>
  </el-dialog>
  <el-dialog  custom-class="yaokongPersonDialog" :visible.sync="operatorPwdDialogVisible" width="22%" :close-on-click-modal="false">
    <p slot="title" class="el-dialog__title">监护人</p>
    <div class="operatorPwd">
      <div class="operator">
        <label>请输入监护人</label>
        <el-select size="small" v-model="adminPwdObj.username" style="width: 16rem;">
          <el-option
            v-for="(item,index) in userInfoJson.adminList"
            :key="index"
            :label="item.username"
            :value="item.username"
          ></el-option>
        </el-select>

      </div>
      <div class="pwd">
        <label>请输入监护员密码</label>
        <el-input v-model="adminPwdObj.pwd" size="small" type="password" @keydown.enter.native="operatorPwdSubmit"></el-input>
      </div>
    </div>
    <span slot="footer" class="dialog-footer" >
				<el-button size="small" @click="operatorPwdSubmit">确 定</el-button>
				<el-button size="small" @click="operatorPwdDialogVisible = false">取 消</el-button>
			</span>
  </el-dialog>
  <el-dialog
    custom-class="switchPatrolDialog"
    :visible.sync="dialogVisible"
    :close-on-press-escape="true"
    :close-on-click-modal="true"
    :width="`40%`"
    :modal="false"
    @before-close="handleDialogClose"
  >

    <!-- 隔离刀 -->
    <template v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.type == 'gelidao'">

      <!-- 遥控 - 弹框 -->
      <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 1">
        <p slot="title" class="el-dialog__title">遥控</p>
        <yaokongDialog :currentSelectMenuItemObj="currentSelectMenuItemObj" :text="yaokongMsg"></yaokongDialog>
      </template>

      <!-- 开关清闪 - 弹框 -->
      <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 2">
        <p slot="title" class="el-dialog__title">开关清闪</p>
      </template>



      <!-- 挂牌/摘牌 - 弹框 -->
      <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 6">
        <p slot="title" class="el-dialog__title">挂牌/摘牌</p>
        <guapaiDialog :currentSelectMenuItemObj="currentSelectMenuItemObj"></guapaiDialog>
      </template>

      <span slot="footer" class="dialog-footer" >
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value != 4" size="small" @click="dialogVisible = false">取 消</el-button>

        <!-- 遥控 按钮 -->
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1&&!canyaoKong" size="small" @click="yaokongSelect">遥控选择</el-button>
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1&&canyaoKong" size="small" @click="remoteControlSelect">遥控执行</el-button>
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1" size="small" type="primary" plain @click="dialogVisible = false">关 闭</el-button>
        <!-- 挂牌/摘牌 按钮 -->
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 6" size="small" type="primary" @click="handleBrand">确 定</el-button>

				</span>
    </template>

    <!-- 地刀 -->
    <template v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.type == 'didao'">
      <!--          遥控-->
      <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 1">
        <p slot="title" class="el-dialog__title">遥控</p>
        <yaokongDialog :currentSelectMenuItemObj="currentSelectMenuItemObj" :text="yaokongMsg"></yaokongDialog>
      </template>
      <!-- 开关清闪 - 弹框 -->
      <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 0">
        <p slot="title" class="el-dialog__title">开关清闪</p>
        <span>暂无内容</span>
      </template>

      <!-- 全站清闪 - 弹框 -->
      <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 4">
        <p slot="title" class="el-dialog__title">全站清闪</p>
        <span>暂无内容</span>
        <!-- <yaokongDialog :currentSelectMenuItemObj="currentSelectMenuItemObj"></yaokongDialog> -->
      </template>
      <!-- 挂牌/摘牌 - 弹框 -->
      <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 5">
        <p slot="title" class="el-dialog__title">挂牌/摘牌</p>
        <guapaiDialog :currentSelectMenuItemObj="currentSelectMenuItemObj"></guapaiDialog>
      </template>
      <span slot="footer" class="dialog-footer" >
            <!-- 遥控 按钮 -->					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 0" size="small" @click="dialogVisible = false">取 消</el-button>
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1&&!canyaoKong" size="small" @click="yaokongSelect">遥控选择</el-button>
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1&&canyaoKong" size="small" @click="remoteControlSelect">遥控执行</el-button>
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1" size="small" type="primary" plain @click="dialogVisible = false">关 闭</el-button>


        <!-- 挂牌/摘牌 按钮 -->
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 5" size="small" type="primary" @click="handleBrand">确 定</el-button>
				</span>
    </template>

    <!-- 断路器 -->
    <template v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.type == 'duanluqi'">
      <!-- 遥控 - 弹框 -->
      <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 1">
        <p slot="title" class="el-dialog__title">遥控</p>
        <yaokongDialog :currentSelectMenuItemObj="currentSelectMenuItemObj" :text="yaokongMsg"></yaokongDialog>
      </template>
      <!-- 开关清闪 - 弹框 -->
      <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 2">
        <p slot="title" class="el-dialog__title">开关清闪</p>
        <span>确定要将{{currentSelectMenuItemObj.currentObj.name}}开关清闪吗？</span>
        <!-- <yaokongDialog :currentSelectMenuItemObj="currentSelectMenuItemObj"></yaokongDialog> -->
      </template>
      <!-- 全站清闪 - 弹框 -->
      <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 3">
        <p slot="title" class="el-dialog__title">全站清闪</p>
        <span>确定要将全部设备进行清闪吗？</span>
        <!-- <yaokongDialog :currentSelectMenuItemObj="currentSelectMenuItemObj"></yaokongDialog> -->
      </template>

      <!-- 挂牌/摘牌 - 弹框 -->
      <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 6">
        <p slot="title" class="el-dialog__title">挂牌/摘牌</p>
        <guapaiDialog :currentSelectMenuItemObj="currentSelectMenuItemObj"></guapaiDialog>
      </template>
      <span slot="footer" class="dialog-footer" >
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value != 4" size="small" @click="dialogVisible = false">取 消</el-button>
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 2" size="small" @click="clearFlesh">确定</el-button>
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 3" size="small" @click="clearAll">确定</el-button>
        <!-- 遥控 按钮 -->
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1&&!canyaoKong" size="small" @click="yaokongSelect">遥控选择</el-button>
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1&&canyaoKong" size="small" @click="remoteControlSelect">遥控执行</el-button>
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1" size="small" type="primary" plain @click="dialogVisible = false">关 闭</el-button>

        <!-- 挂牌/摘牌 按钮 -->
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 6" size="small" type="primary" @click="handleBrand">确 定</el-button>
				</span>
    </template>

    <!-- 把手 -->
    <template v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.type == 'bashou'">
      <!-- 操作 - 弹框 -->
      <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 1">
        <p slot="title" class="el-dialog__title">操作</p>
        <span>暂无内容</span>
      </template>
      <span slot="footer" class="dialog-footer" >
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value != 2" size="small" @click="dialogVisible = false">取 消</el-button>

				</span>
    </template>



    <template v-if="currentSelectMenuItemObj&&currentSelectMenuItemObj.type=='ruanyaban'">
      <template v-if="currentSelectMenuItemObj.currentSelectItem.value == 1">
        <p slot="title" class="el-dialog__title">遥控</p>
        <yaokongDialog :currentSelectMenuItemObj="currentSelectMenuItemObj" :text="yaokongMsg"></yaokongDialog>
      </template>
      <span slot="footer" class="dialog-footer" >
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 2" size="small" @click="dialogVisible = false">取 消</el-button>

        <!-- 遥控 按钮 -->
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1&&!canyaoKong" size="small" @click="yaokongSelect">遥控选择</el-button>
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1&&canyaoKong" size="small" @click="remoteControlSelect">遥控执行</el-button>
					<el-button v-if="currentSelectMenuItemObj && currentSelectMenuItemObj.currentSelectItem.value == 1" size="small" type="primary" plain @click="dialogVisible = false">关 闭</el-button>
				</span>
    </template>




  </el-dialog>
  <el-dialog ref="operateRecordDialogRef" custom-class="operateRecordDialog" :modal="false" :close-on-click-modal="false" v-if="operationRecordsDialogVisible" :visible.sync="operationRecordsDialogVisible" v-dialogDrag:{dialogDrag}="true" width="35%">
    <p slot="title" class="el-dialog__title">操作记录</p>
    <div class="messageAlarmList">
      <el-table :data="operationRecordsData" width="100%" height="250" >
        <el-table-column prop="num" label="序号" width="85" header-align="center" align="center" >
          <template #default="{row}">
            <span :class="{'is-highlight': !!row.isHighlight}">{{row.num}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="操作时间" width="160" header-align="center" align="center" >
          <template #default="{row}">
            <span :class="{'is-highlight': !!row.isHighlight}">{{row.createTime}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="log_desc" label="操作描述" header-align="center" >
          <template #default="{row}">
            <span :class="{'is-highlight': !!row.isHighlight}">{{row.log_desc}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-dialog>
</div>
</template>

<style scoped lang="less">
@import "@/assets/css/public";
main {
  height: calc(100% - 90px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #FFFFFF;
  & > div {
    &:nth-of-type(1) {
      width: 100%;
      height: 68%;
    }
    &:nth-of-type(2) {
      width: 100%;
      height: 31%;
    }

  }
}
.top{
    display: flex;
    justify-content: space-between;
  & > div {
    &:nth-of-type(1) {
      border: 1px solid white;
      width: 32%;
      height: 100%;
    }
    &:nth-of-type(2) {
      width: 67%;
      height: 100%;
    }
  }

}
.yc{
  display: flex;
  justify-content: space-between;
  & > div {
    background-color: rgb(24, 61, 94);
    border-radius: 20px;
    width: 24.8%;
  }
}
.netTitle{
  font-size: 15px !important;
}
.canvas{
  height: 85%;
  width: 100%;
}
.bashous{
  height:14% ;
  position: relative;
}
.control-handle-wrapper {
  box-sizing: border-box;
  position: absolute;
  left: 75px;
  .control-handle-name {
    text-align: center;
    line-height: 30px;
    font-size: 20px;
    border-bottom: none;
    padding: 4px;
  }
  .control-handle-grid {
    width: 100%;
    display: grid;
    grid-template-rows: repeat(1, 1fr);
    grid-template-columns: repeat(3, 1fr);
    .control-handle-grid-item {
      border: 1px solid #cccccc;
      height: 90px;
      text-align: center;
      padding: 0px;
      box-sizing: border-box;
      position: relative;
      .svg-wrapper {
        width: 100%;
        height: 60px;
        svg {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
        }
        .rotate {
          transform-origin: center;
        }
        .polygon-icon {
          position: absolute;
          left: 10px;
          top: 36px;
          width: 50px;
          height: 50px;
        }
      }
      .grid-item-name {
        margin-top: 10px;
        font-size: 12px;
      }
    }
  }
}
.hard-platen-wrapper {
  position: absolute;
  left: 400px;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  width: 50%;
  .hard-platen-inner {
    height: 100%;
    position: relative;

  }
  .hard-platen-name {
    text-align: center;
    height: 30px;
    line-height: 30px;
    font-size: 18px;
    border-bottom: 2px solid #FFFFFF;
    padding: 2px;
    position: sticky;
    background-color: #000000;
    top: 1px;
  }
  .hard-platen-item {
    .hard-platen-item-name {
      color: #a9765e;
      font-size: 16px;
      text-align: center;
      padding: 10px;
      border-bottom: 2px solid #FFFFFF;
    }
    .list-item {
      display: flex;
      align-items: center;
      padding: 4px 10px;
      .list-item-svg {
        width: 30px;
        height: 30px;
        flex-shrink: 0;
        margin-right: 10px;
        cursor: pointer;
        position: relative;
        svg {
          width: 100%;
          height: 100%;
        }
      }
      .list-item-name {
        flex: 1;
        font-size: 14px;
      }
    }
  }
}
.bottom{
  display: flex;
  & > div {
    &:nth-of-type(1) {
      width: 60%;
      height:100%;
    }
    &:nth-of-type(2) {
      width: 40%;
      height: 100%;
      border: 1px solid white;
    }

  }
}
.bashouBottom{
  display: flex;
  & > div {
    border: 1px solid white;
    &:nth-of-type(1) {
      width: 40%;
      height:100%;
    }
    &:nth-of-type(2) {
      width: 40%;
      height: 100%;
    }
    &:nth-of-type(3) {
      width: 20%;
      height: 100%;
    }

  }
}
</style>
